<template>
	<view class="toast animated" :class="visible ? 'sheetIn' : ''" v-if="visible" :style="'z-index:' + config.zIndex">
		<view class="wrapper" :style="'text-align:'+config.textAlign">
			<view v-if="config.type" class="icon">
				<!-- <image v-if="config.type === 1" class="processing" mode="aspectFit"
                   :src="imageBaseUri + '/v2.4.2/icon-processing.png'"></image>

            <image wx:elif="{{config.type === 2" class="succeed" mode="aspectFit"
                   :src="imageBaseUri + '/v2.4.2/icon-succeed.png'"></image>

            <image wx:elif="{{config.type === -1" class="failed" mode="aspectFit"
                   :src="imageBaseUri + '/v2.4.2/icon-failed.png'"></image> -->
				<icon v-if="config.type === 1" class="icon-box-img" type="waiting" size="80"></icon>
				<icon v-if="config.type === 2" class="icon-box-img" type="success" size="80"></icon>
				<icon v-if="config.type === -1" class="icon-box-img" type="warn" size="80"></icon>
			</view>
			<text class="text">{{ text }}</text>
		</view>
	</view>
</template>

<script>
const utils = require('../../utils/utils');
export default {
	props: {
       visible: {
           type: Boolean,
           default: false,
       },
       text: {
           type: String,
           default: '错误',
       },
       config: {
           type: Object,
           default:()=> ({
               zIndex: 101,
               type: 0,
               autoClose: true,
               textAlign: 'justify', //文字对齐方式 默认justify
           })
       }
	},
	data() {
		return {

		};
	},
	watch: {
		async visible(newVal, oldVal) {
			if (newVal && this.config.autoClose) {
				await utils.sleep(1500);
				this.visible = false
			}
		},
	},
}
</script>

<style lang="less" scoped>
.toast {
	font-size: 32rpx;
	font-weight: 400;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 101;
	color: #fff;
	text-align: justify;
}
.toast .wrapper {
	border-radius: 6rpx;
	padding: 30rpx;
	max-width: 670rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.7);
}
.toast .wrapper .icon {
	width: 80rpx;
	height: 80rpx;
	margin-bottom: 40rpx;
}
/* .toast .wrapper .icon image {
  width: 100%;
  height: 100%;
} */
.animated {
	-webkit-animation-duration: 0.3s;
	-webkit-animation-fill-mode: both;
	animation-duration: 0.3s;
	animation-fill-mode: both;
}
.sheetIn {
	animation-name: popIn;
}
@keyframes popIn {
	0% {
		transform: scale(0);
	}
	80% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1);
	}
}
</style>
